<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib prefix="sb" uri="/struts-bootstrap-tags"%>

<style>
.labelTanggal {
	background-color: aqua;
	float: left;
	font-size: 32px;
	height: 30px;
	margin-bottom: 40px;
	padding-bottom: 0;
	padding-top: 10px;
	position: relative;
	text-align: center;
	width: 40px;
}

.table td {
	padding: 0px;
}

.agenda {
	width: 20px;
	height: 20px;
	float: left;
}

#agendaDetail {
	width: 200px;
	height: 200px;
	background-color: #F0F7FD;
	position: absolute;
	border: solid 1px #FFF7FD;
}

#agendaDetail .table {
	font-size: 10px;
}
.labelLegend {
	width: 90px;
	height: 100%;
	position: relative;
	float: left;
	margin-top: 0px;
	margin-left: 0px;
}
</style>


<s:url var="urlBulanSebelum"
	action="modul/agendapimpinan/page/kalendar"
	escapeAmp="false">
	<s:param name="tahun" value="%{tahun}"></s:param>
	<s:param name="bulanSebelum" value="%{bulanSebelum}"></s:param>
</s:url>

<s:url var="urlBulanSesudah"
	action="modul/agendapimpinan/page/kalendar"
	escapeAmp="false">
	<s:param name="tahun">
		<s:property value="%{tahun}" />
	</s:param>
	<s:param name="bulanSesudah">
		<s:property value="%{bulanSesudah}" />
	</s:param>
</s:url>
<div id="debug"></div>
<s:property value="jumlahMinggu"/>
<table style="width: 100%" class="table table-bordered">
	<tr>

		<th><sj:a href="%{urlBulanSebelum}" targets="resultKalendar">
				<s:property value="%{namaBulanSebelum}" />
			</sj:a></th>
		<th colspan="5"><s:property value="%{tahun}" /> <s:property
				value="%{namaBulan}" /></th>
		<th><sj:a href="%{urlBulanSesudah}" targets="resultKalendar">
				<s:property value="%{namaBulanSesudah}" />
			</sj:a></th>

	</tr>
	<tr>

		<th>Minggu</th>
		<th>Senin</th>
		<th>Selasa</th>
		<th>Rabu</th>
		<th>Kamis</th>
		<th>Jumat</th>
		<th>Sabtu</th>

	</tr>
	<s:set var="tgl" value="0"></s:set>

	<s:iterator begin="1" end="jumlahMinggu" step="1" id="tanggal">
		<tr>
			<s:iterator begin="1" end="7" step="1">
				<s:set var="tgl" value="%{#tgl+1}" />
				<s:if test="%{#tgl < hariPertama}">
					<td align="center">-</td>
				</s:if>
				<s:elseif test="%{#tgl - (hariPertama-1) > jumlahHari}">
					<td align="center">-</td>
				</s:elseif>
				<s:else>
					<td>
						<div class="innerTd">

							<div class="labelTanggal">
								<s:property value="%{#tgl - (hariPertama-1)}" />
								<s:set var="fulldate">
									<s:text
										name="%{tahun}%{indexbulan}+''+((#tgl - (hariPertama-1)) < 10 ? '0' + (#tgl - (hariPertama-1))  : (#tgl - (hariPertama-1)))"></s:text>
								</s:set>
							</div>
							<div class="labelLegend"
								id="kal<s:property value="%{#fulldate}" />">
								<s:property value="%{#fulldate}" />
							</div>
						</div>
					</td>

				</s:else>
			</s:iterator>
		</tr>
	</s:iterator>
</table>

<div id="agendaDetail">
</div>

<script>
var isShow = false;
	$(function() {
		var agendaArr = new Object;
		$(".labelAgenda").each(function() {
			var arr = this.id.replace("agd", "").split("-");
			range = (parseInt(arr[2]) - parseInt(arr[1]));
			if (!isNaN(range)) {
			//	alert(arr[0] + ":" + range + " " + arr[2] + " " + arr[1]);
			
				for ( var i = parseInt(arr[1]); i <= parseInt(arr[2]); i++) {
				//	$("#debug").html(this.id);
					//$("#kal" + i).append($("<div class='agenda'>" + $("#" + this.id).children("#idTitle").text() + "</div>").css("background-color", $("#" + this.id).css("border-left-color")));
					$("#kal" + i).append($("<div class='agenda' id='agenda" + arr[0] +"'></div>").css("background-color", $("#" + this.id).css("border-left-color")));
			//		$("#kal" + i).append($("<div>" + arr[0] + "</div>").css("background-color", $("#" + this.id).css("border-left-color")));
				}
			}
		});
		
		//$("#kal20130901").append($("<span>OK</span>").addClass("flag"));
		$(".labelKalendar").each(function() {
			agendaArr.push(this.id.replace("kal", ""));

		});
	$("#agendaDetail").hide();
	
	
	$(".agenda").click(function() {
			if (!isShow) {
				isShow = true;
				$("#agendaDetail").show();
				var position = $(this).offset();
				$("#agendaDetail").css({
					left : (position.left + ($(this).width())),
					top : (position.top + ($(this).height()))
				});
				$.ajax({

					url : "agenda/page/detail",
					data : {
						"agendaId" : ($(this).attr("id")).replace("agenda", "")
					},
					dataType:"html",
					success:function(html) {
						$("#agendaDetail").html(html);
					}
				});
			} else {
				$("#agendaDetail").hide();
				isShow = false;
			}
		});
	});
</script>